<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>setCustomValidity Example</title>
</head>

<body>
    <h2>Try out <code>setCustomValidity()</code></h2>
    <p>Type <code>puppy</code> into the input. Check the <a
            href="view-source:http://udacity.github.io/course-web-forms/lesson2/setCustomValidity/index.html"
            target="_blank">page's source</a> to see how this form works.</p>
    <form action="passed.html">
        <label><code><code>puppy</code></code> input:
            <input id="puppy-input" type="text" placeholder="type here" autofocus>
        </label>
        <input id="submit" type="submit">
    </form>
    <p><em>Note: this demo works best with Chrome or Firefox. Check <a
                href="http://afarkas.github.io/webshim/demos/#Forms-forms" target="_blank">Webshim for a
                polyfill</a>.</em></p>
    <script>
        var puppyInput = document.querySelector('#puppy-input');
        var submit = document.querySelector('#submit');

        submit.onclick = function () {
            if (puppyInput.value !== "puppy") {
                puppyInput.setCustomValidity("你的输入有误, 应该输入'puppy', 你输的是'" + puppyInput.value + "'");
            } else {
                puppyInput.setCustomValidity("");
            }
        };
    </script>
</body>

</html>